<template>
  <el-dialog
    :visible.sync="visable"
    width="480px"
    title="设置登录密码"
    :show-close="false"
    :close-on-click-modal="false"
    :append-to-body="true"  
  >
    <div class="dialog-body">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="设置登录密码" class="required">
          <el-input
            v-model="pwd"
            name="password"
            type="password"
            v-validate="'required|password'"
            placeholder="请设置登录密码"
            @keydown.native="keyDown($event)"
          />
          <div v-show="errors.has('password')" class="el-form-item__error">{{ errors.first('password') }}</div>
        </el-form-item>
        <el-form-item label="确认密码" class="required">
          <el-input
            v-model="repwd"
            name="renew_password"
            type="password"
            v-validate="'required|confirmed:password|new-password'"
            data-vv-as="password"
            placeholder="请再次输入登录密码"
            @keydown.native="keyDown($event)"
          />
          <div v-show="errors.has('renew_password')" class="el-form-item__error">{{ errors.first('renew_password') }}</div>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="comfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visable: true,
      pwd: '',
      repwd: ''
    }
  },
  methods: {
    keyDown(e) {
      console.log('k: ', e)
      if (e.keyCode == 32) {
        e.returnValue = false
      }
    },
    comfirm() {
      this.$validator.validateAll().then((valid) => {
        if (valid) {
          this.$emit('comfirm', this.pwd)
        }
      })
      
    }
  }, 
}
</script>

<style lang="stylus">

</style>